<template>
    <div>
        <mu-appbar style="width: 100%;" color="primary" fixed>
        <mu-button icon slot="left" @click="goback">
            <mu-icon value="reply"></mu-icon>
        </mu-button>
        活动详情
        <mu-menu slot="right">
        <mu-button icon >
            <mu-icon value="more_horiz" ></mu-icon>
        </mu-button>
          <mu-list slot="content">
            <mu-list-item button @click="openinDialog">
              <mu-list-item-title>签到</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button @click="openoutDialog">
              <mu-list-item-title>签退</mu-list-item-title>
            </mu-list-item>
          </mu-list>
        </mu-menu>
        </mu-appbar>

        <mu-dialog title="签到"  :open.sync="indialog">
          签到二维码
          <img class="signimg" src="../../assets/images/signin.png" alt="">
          <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
        </mu-dialog>
        <mu-dialog title="签退" width="360" :open.sync="outdialog">
          签退二维码
          <img class="signimg" src="../../assets/images/signout.png" alt="">
          <mu-button slot="actions" flat color="primary" @click="signout()">统一签退</mu-button>
          <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
        </mu-dialog>
        <div>
            <mu-card class="cards">
            <mu-card-header :title="act.publisher.username" :sub-title="act.publisher.cname">
                <mu-avatar slot="avatar">
                <img :src="avatar">
                </mu-avatar>
            </mu-card-header>
            <mu-card-media :title="act.title" >
                <img :src="act.pic" >
            </mu-card-media>
            <mu-card-text class="detail">
              【活动内容】<br/>{{act.describe}}    <br/><br/>
              【活动要求】<br/>{{act.requirement}} <br/><br/>
                活动负责人：{{act.contector}} <br/>
                活动地区：{{act.area}}      <br/>
                详细地址：{{act.address}}   <br/>
                活动类型：{{act.type}}      <br/>
                联系电话：{{act.phone}}     <br/>
                活动时间:{{act.starttime | formatDate}} 至 {{act.endtime | formatDate}}   <br/>
            </mu-card-text>
            
            <br>
            </mu-card>
            <mu-appbar style="width: 100%;" title="Title">已通过报名人</mu-appbar>
            <mu-expansion-panel  v-for="(sign,index) in act.signlist" :key="index" v-if="act.signlist[index].status==1">
                <div slot="header" class="headerdiv">
                    <mu-avatar>
                        <img src="../../assets/images/uicon.jpg">
                    </mu-avatar>
                    {{act.signlist[index].username}}
                </div>
                热心助人
                <mu-button slot="action" flat color='success' >已通过</mu-button>
            </mu-expansion-panel>
            <mu-appbar style="width: 100%;" title="Title">待通过报名人</mu-appbar>
            <mu-expansion-panel  v-for="(sign,index) in act.signlist" :key="index" v-if="!act.signlist[index].status==1">
                <div slot="header" class="headerdiv">
                    <mu-avatar>
                        <img src="../../assets/images/uicon.jpg">
                    </mu-avatar>
                    {{act.signlist[index].username}}
                </div>
                热心助人
                <mu-button slot="action" flat color='success' @click.native="pass(index)" v-if="act.signlist[index].status==0">通过</mu-button>
                <mu-button slot="action" flat color="error" @click.native="refuse(index)" v-if="act.signlist[index].status==0">拒绝</mu-button>
                <mu-button slot="action" flat color="error" v-if="act.signlist[index].status==2">已拒绝</mu-button>
                <mu-button slot="action" flat color='success' v-if="act.signlist[index].status==1">已通过</mu-button>
            </mu-expansion-panel>
        </div>
        <br><br><br>
    </div>
</template>

<script>
import moment from "moment";
import axios from "axios";
import Message from "muse-ui-message";
import Toast from "muse-ui-toast";
import { formatDate } from "../../date/date.js";
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  components: {},
  data() {
    return {
      config: {
        value: "https://www.baidu.com",
        imagePath: "./examples/assets/logo.png",
        filter: "color"
      },
      downloadButton: false,
      indialog: false,
      outdialog: false,
      act: { publisher: ""},
      avatar: "",
      user: ""
    };
  },
  created() {
    axios.get("/api/user/getUserMsg").then(result => {
      let user = result.data;
      this.avatar = user.avatar;
      this.user = user;
    });
    axios
      .get("/api/activity/getactdetail", {
        params: {
          id: this.$route.query.id
        }
      })
      .then(res => {
        this.act = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    signout(){
                           function daysB(sDate1,sDate2){
                    var time1 = Date.parse(new Date(sDate1));
                    var time2 = Date.parse(new Date(sDate2));
                    var m = Math.abs(parseInt((time2-time1)/1000/60));
                    return m;
                }
                for(var i=0;i<=this.act.signlist.length;i++){
                   let m0 = this.act.signlist[i]
                     let _m0 = m0.sign
                    let m1 = _m0.signTime
                    let m2 = moment(Date.now()).format("YYYY-MM-DD HH:mm");
                    var ms = daysB(m1,m2);
                    //获取用户时长
                    let u=this.act.signlist[i].username
                    axios.post("/api/user/getusertime",{data:u}).then(result=>{
                      if(result){
                        let mm=result.data[0].time
                        let mmm=parseInt(mm)+parseInt(ms)
                        
                        //相加后更新到数据库
                       axios.post("/api/user/signout",{time:mmm,un:u}).then(result=>{
                      if(result.data=="签退成功"){
                           console.log("签退成功"+[i])
                           Toast.success("签退成功")
                           axios.post("/api/activity/signout",{actid:this.act._id}).then(result=>{
                                  if(result.data=="签退成功"){
                                    console.log("签退活动成功")
                                  }
                           })
                           this.$router.push('/index/actmanage')
                      }else{
                        console.log("签退失败"+[i])
                        Toast.success("签退失败")
                      }
                    })
                      }
                    })


                }
    },
    openinDialog() {
      this.indialog = true;
    },
    openoutDialog() {
      this.outdialog = true;
    },
    closeSimpleDialog() {
      this.indialog = this.outdialog = false;
    },
    goback() {
      this.$router.go(-1); //返回上一层
    },
    pass(index) {
      Message.confirm("您确认通过吗?", "确认").then(conresult => {
        if (conresult.result) {
          axios
            .post("/api/activity/pass", {
              actid: this.$route.query.id,
              applicantid: this.act.signlist[index]._id
            })
            .then(res => {
              Toast.success("通过成功！");
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          Toast.error("您取消了操作");
        }
      });
    },
    refuse(index) {
      Message.confirm("您确认拒绝吗?", "确认").then(conresult => {
        if (conresult.result) {
          axios
            .post("/api/activity/refuse", {
              actid: this.$route.query.id,
              applicantid: this.act.signlist[index]._id
            })
            .then(res => {
              Toast.success("拒绝成功！");
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          Toast.error("您取消了操作");
        }
      });
    }
  }
};
</script>

<style>
.detail {
  text-align: left;
  margin-left: 1rem;
}
.headerdiv {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headerdiv .mu-avatar {
  margin: 10px;
}
.signimg{
  width: 100%;
}
</style>
